<template>
  <div style="width: 1200px;margin: 0 auto">
    <el-carousel>
      <el-carousel-item v-for="b in bannerArr">
        <img :src="b" style="width: 100%;height: 100%">
      </el-carousel-item>
    </el-carousel>
<!--  食谱相关开始  -->
    <el-row style="background-color: white">
      <el-col :span="3">
        <p style="font-size: 28px;margin: 10px">烘焙食谱</p>
      </el-col>
      <el-col :span="21">
        <el-menu mode="horizontal" default-active="1" active-text-color="orange">
          <el-menu-item index="1">全部</el-menu-item>
          <el-menu-item index="2">面包</el-menu-item>
          <el-menu-item index="3">零食</el-menu-item>
          <el-menu-item index="4">家常菜</el-menu-item>
        </el-menu>
      </el-col>
    </el-row>
<!--  内容列表开始  -->
    <el-row :gutter="20">
      <el-col :span="6" v-for="c in contentArr" style="margin: 10px 0">
        <el-card>
          <img :src="c.imgUrl" style="width: 100%;height: 145px">
          <p style="height: 40px">{{c.title}}</p>
          <el-row :gutter="20">
            <el-col :span="4">
              <el-avatar :size="35" :src="c.userImgUrl"></el-avatar>
            </el-col>
            <el-col :span="20">
              <p style="margin-top: 10px">
                {{c.nickName}}
                <span style="font-size: 12px;color: #666;float: right">{{c.categoryName}}</span>
              </p>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>
    <div style="text-align: center">
      <el-button>点击加载更多</el-button>
    </div>
    <!--  内容列表结束  -->
<!--  食谱相关结束  -->




    <!--  食谱相关开始  -->
    <el-row style="background-color: white">
      <el-col :span="3">
        <p style="font-size: 28px;margin: 10px">烘焙视频</p>
      </el-col>
      <el-col :span="21">
        <el-menu mode="horizontal" default-active="1" active-text-color="orange">
          <el-menu-item index="1">全部</el-menu-item>
          <el-menu-item index="2">面包</el-menu-item>
          <el-menu-item index="3">零食</el-menu-item>
          <el-menu-item index="4">家常菜</el-menu-item>
        </el-menu>
      </el-col>
    </el-row>
    <!--  内容列表开始  -->
    <el-row :gutter="20">
      <el-col :span="6" v-for="c in contentArr" style="margin: 10px 0">
        <el-card>
          <img :src="c.imgUrl" style="width: 100%;height: 145px">
          <p style="height: 40px">{{c.title}}</p>
          <el-row :gutter="20">
            <el-col :span="4">
              <el-avatar :size="35" :src="c.userImgUrl"></el-avatar>
            </el-col>
            <el-col :span="20">
              <p style="margin-top: 10px">
                {{c.nickName}}
                <span style="font-size: 12px;color: #666;float: right">{{c.categoryName}}</span>
              </p>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>
    <div style="text-align: center">
      <el-button>点击加载更多</el-button>
    </div>
    <!--  内容列表结束  -->
    <!--  视频相关结束  -->




    <!--  资讯相关开始  -->
    <el-row style="background-color: white">
      <el-col :span="3">
        <p style="font-size: 28px;margin: 10px">行业资讯</p>
      </el-col>
      <el-col :span="21">
        <el-menu mode="horizontal" default-active="1" active-text-color="orange">
          <el-menu-item index="1">全部</el-menu-item>
          <el-menu-item index="2">面包</el-menu-item>
          <el-menu-item index="3">零食</el-menu-item>
          <el-menu-item index="4">家常菜</el-menu-item>
        </el-menu>
      </el-col>
    </el-row>
    <!--  内容列表开始  -->
    <el-row :gutter="20">
      <el-col :span="6" v-for="c in contentArr" style="margin: 10px 0">
        <el-card>
          <img :src="c.imgUrl" style="width: 100%;height: 145px">
          <p style="height: 40px">{{c.title}}</p>
          <el-row :gutter="20">
            <el-col :span="4">
              <el-avatar :size="35" :src="c.userImgUrl"></el-avatar>
            </el-col>
            <el-col :span="20">
              <p style="margin-top: 10px">
                {{c.nickName}}
                <span style="font-size: 12px;color: #666;float: right">{{c.categoryName}}</span>
              </p>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>
    <div style="text-align: center">
      <el-button>点击加载更多</el-button>
    </div>
    <!--  内容列表结束  -->
    <!--  资讯相关结束  -->


  </div>
</template>

<script setup>
  import {ref} from "vue";

  const bannerArr = ref(["/imgs/banner1.jpg","/imgs/banner2.jpg","/imgs/banner3.jpg"])
  const contentArr = ref([
    {
      "id": 27,
      "title": "家常面包",
      "imgUrl": "/imgs/a.jpg",
      "categoryName": "面包",
      "nickName": "汤姆",
      "userImgUrl": "/imgs/head.jpg"
    },
    {
      "id": 18,
      "title": "爆浆抹茶甜甜圈面包，自带幸福感的小甜甜",
      "imgUrl": "/imgs/b.jpg",
      "categoryName": "家常菜",
      "nickName": "汤姆",
      "userImgUrl": "/imgs/head.jpg"
    },
    {
      "id": 17,
      "title": "心形火龙果椰蓉面包,任谁都抗拒不了",
      "imgUrl": "/imgs/c.jpg",
      "categoryName": "小食",
      "nickName": "汤姆",
      "userImgUrl": "/imgs/head.jpg"
    },
    {
      "id": 16,
      "title": "蔓越莓绿豆糕，味道还不错值得一试!",
      "imgUrl": "/imgs/d.jpg",
      "categoryName": "面包",
      "nickName": "汤姆",
      "userImgUrl": "/imgs/head.jpg"
    },
  ])
</script>

<style scoped>

</style>